<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>二课活动</title>
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
    <script src="${pageContext.request.contextPath}/JavaScript/JQuery.js"></script>
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-table me-1"></i>
                    活动列表
                </div>
                <div class="card-body">
                    <br>
                    <table id="datatablesSimple">
                        <thead>
                        <tr>
                            <th>活动编号</th>
                            <th>活动名称</th>
                            <th>活动开始时间</th>
                            <th>活动结束时间</th>
                            <th>提交材料</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${actInfo.entrySet()}" var="entry">
                            <c:set var="act" value="${entry.value}"/>
                            <tr>
                                <td>${entry.key}</td>
                                <td>${act.name}</td>
                                <td>${act.beginTime}</td>
                                <td>${act.endTime}</td>
                                <td>
                                    <form id="uploadForm_${entry.key}">
                                        <input type="file" id="uploadImage_${entry.key}" accept="image/*" style="display:none"
                                               onchange="previewImage(${entry.key})">
                                        <button type="button" id="uploadBtn_${entry.key}" onclick="document.getElementById('uploadImage_${entry.key}').click();">选择图片上传</button>
                                        <button type="button" id="submitBtn_${entry.key}" style="display:none;" onclick="submitImage('${entry.key}');">提交图片</button>
                                        <br>
                                        <img id="previewImage_${entry.key}" src="#" alt="预览图片" style="display:none;">
                                    </form>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>

                <!-- 弹出图片的模态框 -->
                <div id="imageModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; background-color:white; padding:20px; border:1px solid black;">
                    <span onclick="closeImage()" style="cursor:pointer; position:absolute; top:10px; right:10px;">关闭</span>
                    <img id="imageContent" src="" style="max-width:100%;">
                </div>
            </div>
        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script>
  function previewImage(actId) {
    var fileInput = document.getElementById('uploadImage_' + actId);
    var file = fileInput.files[0];

    if (file) {
      var uploadBtn = document.getElementById('uploadBtn_' + actId);
      var submitBtn = document.getElementById('submitBtn_' + actId);
      var previewImage = document.getElementById('previewImage_' + actId);
      uploadBtn.innerText = '显示上传图片';
      submitBtn.style.display = 'inline-block';

      var reader = new FileReader();
      reader.onload = function (e) {
        previewImage.src = e.target.result;
        uploadBtn.onclick = function () {
          showImage(e.target.result);
        };
      };
      reader.readAsDataURL(file);
    }
  }

  function submitImage(actId) {
    var fileInput = document.getElementById('uploadImage_' + actId);
    var file = fileInput.files[0];

    if (file) {
      var formData = new FormData();
      formData.append('image', file); // 'image' 是后端接收图片的字段名，根据实际情况调整
      formData.append('ActiveID', actId); // 提交活动ID
      formData.append('LoginUserID', ${LogUser.getUserID()});

      $.ajax({
        url: "${pageContext.request.contextPath}/submitActiveMat",
        type: 'POST',
        data: formData,
        processData: false, // 不要处理数据，因为我们使用FormData
        contentType: false, // 不要设置Content-Type，让浏览器自动设置
        success: function (response) {
          alert('图片上传成功！'); // 根据实际情况处理成功的回调
          var uploadBtn = document.getElementById('uploadBtn_' + actId);
          uploadBtn.innerText = '图片已经上传';
          uploadBtn.onclick = function () {
            showImage(response.trim());
          };
          var submitBtn = document.getElementById('submitBtn_' + actId);
          submitBtn.style.display = 'none';
        },
        error: function (xhr, status, error) {
          alert('图片上传失败: ' + error); // 处理错误情况
        }
      });
    } else {
      alert('请选择图片后再提交！');
    }
  }

  function showImage(imagePath) {
    var modal = document.getElementById('imageModal');
    var image = document.getElementById('imageContent');
    image.src = imagePath;
    modal.style.display = 'block';
  }

  function closeImage() {
    var modal = document.getElementById('imageModal');
    modal.style.display = 'none';
  }
</script>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/simple-datatables@latest.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/datatables-simple-demo.js"></script>
</body>
</html>
